import styles from '../css/order.module.css'
import { useDispatch, useSelector } from 'react-redux'
import { Form, Input, Button } from 'antd-mobile'
import { removePsgByIndex, addPsg } from '../../../store/slice/orderSlice'
import { useContext } from 'react'
import { FormContext } from '../formCtx'
import { useNavigate } from 'react-router-dom'

function ChoosePsg() {
  const nav = useNavigate()
  // const [form] = Form.useForm()
  const form = useContext(FormContext)
  const dispatch = useDispatch()
  // 从仓库中获取乘车人的数据
  const psgArr = useSelector((store) => store.order.psgArr)

  const onFinish = (values) => {
    console.log(values)
  }

  // 点击添加成人
  const addNewPsg = () => {
    // 需要添加的新乘客
    const newPsg = { ticketType: '成人票' }
    // 先把乘客，存入仓库中
    dispatch(addPsg(newPsg))
    // 再把乘客，添加到界面中显示
    form.setFieldValue('contacts', [...psgArr, newPsg])
  }

  return (
    <div className={styles.choosePsgBox}>
      {/* 顶部的 Form.Array 区域 */}
      <Form
        form={form}
        onFinish={onFinish}
        // 表单中的初始数据
        initialValues={{
          // 乘车人的列表数据
          contacts: psgArr
        }}
        mode="card"
        layout="horizontal"
        style={{ '--prefix-width': '80px' }}
      >
        <Form.Array
          name="contacts"
          onAdd={(operation) => operation.add({ name: '张三' })}
          renderHeader={({ index }, { remove }) => (
            <div style={{ fontSize: '12px' }}>
              <span>
                乘车人{index + 1} - {psgArr[index].ticketType}
              </span>
              <a
                onClick={() => {
                  // 从界面上移除某个乘车人
                  remove(index)
                  // 从仓库中移除对应的乘车人
                  dispatch(removePsgByIndex(index))
                }}
                style={{ float: 'right' }}
              >
                删除
              </a>
            </div>
          )}
        >
          {(fields) =>
            fields.map(({ index }) => (
              <>
                <Form.Item
                  name={[index, 'name']}
                  label="姓名"
                  rules={[{ required: true, message: '姓名不能为空' }]}
                >
                  <Input placeholder="乘客姓名" />
                </Form.Item>
                <Form.Item
                  name={[index, 'idcard']}
                  label="身份证"
                  rules={[
                    { required: true, message: '证件号不能为空' },
                    { pattern: /^\d{17}(\d|x|X)$/, message: '身份证格式不正确' }
                  ]}
                >
                  <Input placeholder="证件号码" />
                </Form.Item>
              </>
            ))
          }
        </Form.Array>
      </Form>

      {/* 底部的按钮区域 */}
      <div className={styles.btns}>
        <Button
          color="primary"
          fill="none"
          size="mini"
          onClick={addNewPsg}
        >
          添加成人
        </Button>

        <Button
          color="primary"
          fill="none"
          size="mini"
          onClick={() => nav('/psg-list?mode=choose')}
        >
          选择乘客
        </Button>
      </div>
    </div>
  )
}

export default ChoosePsg
